// 获取类别信息
var myTags = [];
var myCategories = [];
$.ajax({
	type: "GET",
	url: "/topo/tags",
	async:false,
	success:function(data){
		myCategories = data.data;
		$.each(data.data,function(name,value) {
			myTags.push(value.name);
		});
	},
	error:function(){
		alert('error');
	}
});

// 获取基础节点数据
var myItems = [];
$.ajax({
	type: "GET",
	url: "/topo/items",
	async:false,
	success:function(data){
		$.each(data.data,function(name,value) {
			var myitem = {
				"category":value.dict_name,
				"name":value.name,
				"value":value.cpu+"C"+value.memory+"G "+value.concurrent+"并发",
				//symbolSize: 100,
				"draggable":false
			};
			myItems.push(myitem);
		});
	},
	error:function(){
		alert('error');
	}
});

// 获取基础节点之间的关系
var myLinks = [];
$.ajax({
	type: "GET",
	url: "/topo/links",
	async:false,
	success:function(data){
		$.each(data.data,function(name,value) {
			var mylink = {
				"source":value.pname,
				"target":value.cname,
				"category":value.dict_name,
				"value":''
			};
			myLinks.push(mylink);
		});
	},
	error:function(){
		alert('error');
	}
});

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'),'dark');

// 指定图表的配置项和数据
var option = {
		backgroundColor: '#0a1247',
		title: {
			text: ''
		},
		tooltip: {
			formatter: '{b}<br/>{c}'
		},
		animationDurationUpdate: 1500,
		animationEasingUpdate: 'quinticInOut',
		label: {
			normal: {
				show: true,
				textStyle: {
					fontSize: 12
				},
			}
		},
		legend: {
			x: "center",
			show: true,
			data: myTags
		},
		series: [{
        type: 'graph',
        layout: 'force', // circular | force | none
        circular: {
            rotateLabel: true
        },
        force: {
            repulsion: 4000, //斥力,值越大则斥力越大
            layoutAnimation: true, //默认动态为true
        },
        symbol: 'circle', // 节点标记类型
        symbolSize: 80,
        focusNodeAdjacency: true, // 鼠标经过节点是否突出显示
		gravity: 0, //重力
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [5, 10],
        edgeLabel: {
            normal:{
            	show: true,
                textStyle: {
					fontSize: 10
				},
				formatter: "{b}"
            }
        },
        roam: true, // 是否开启鼠标平移
        draggable: true, // 节点是否可拖拽
        label: {
            normal: {
                show: true,
                position: 'inside',
                textStyle: {
                    fontSize: 14,
                    color: '#54f7ff'
                },
            }
        },
        lineStyle: {
            normal: {
                opacity: .7,
                color: '#54f7ff',
                width: 1,
                curveness: 0
            }
        },
        itemStyle: {
            opacity: .7,
            normal: {
                color: {
                    type: 'radial',
                    r: 0.9,
                    colorStops: [{
                        offset: 0,
                        color: '#0c1746'
                    }, {
                        offset: 1,
                        color: '#54f7ff'
                    }]
                },
                borderColor: '#54f7ff',
                borderWidth: 0
            }
        },
		categories: myCategories,
		data: myItems,
		links:myLinks
	}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);